import React from "react";
import "./App.css";
import axios from "axios";
import ListItem from "./components/listItem";
import { DropdownMenu } from "react-vant";
class App extends React.Component {
  state = {
    show: true,
    list: [],
    option: [
       { text: '万达', value: '万达' },
       { text: '博纳国际', value: '博纳国际' },
       { text: '成龙国际', value: '成龙国际' },
       { text: '包里国际', value: '包里国际' },
       { text: '大地影院', value: '大地影院' },
       { text: '完美世界', value: '完美世界' },
       { text: '首都世界', value: '首都世界' },
    ],
  };
  getList = async (type) => {
    const res = await axios.get("/api/list", { params: { type } });
    this.setState({ list: res.data.data });
  };
  render() {
    const { show, list, option } = this.state;
    return (
      <div>
        {/* 筛选 */}
        <DropdownMenu onChange={({ type }) => this.getList(type)}>
          <DropdownMenu.Item name="type" options={option} />
        </DropdownMenu>
        {/* 列表 */}
        {list.map((v) => {
          return <ListItem key={v.id} v={v}></ListItem>;
        })}
        {/* 弹框 */}
        <div className="dialog" style={{ display: show ? "block" : "none" }}>
          <div className="content">
            <h2>
              <span onClick={() => this.setState({ show: false })}>X</span>
            </h2>
            <div>活动广告</div>
          </div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    // 自动关闭 弹框 3s 内
    setTimeout(() => {
      this.setState({
        show: false,
      });
    }, 3000);
    // 请求数据
    this.getList();
  }
}

export default App;
